<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>游戏大厅</title>
    <link href="css/common.css" rel="stylesheet">
    <link href="css/game_hall.css" rel="stylesheet">
</head>
<body>
    <div class="nav">五子棋对战</div>
    <!--整个页面的容器元素-->
    <div class="container">
        <div>
            <!--展示用户信息-->
            <div id="screen"></div>
            <!--匹配按钮-->
            <div id="match-button">开始匹配</div>
        </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script>
        $.ajax({
            type:'get',
            url:'/userinfo',
            success: function(body){
                let screenDiv =document.querySelector("#screen");
                screenDiv.innerHTML = '玩家：'+body.username+" 分数："+ body.score +
                " <br> 比赛场次："+ body.totalCount + ", 获胜场数："+ body.winCount
            },
            error: function(){
                alert("获取用户信息失败");
            }
        });

        //此处进行初始化 websocket,并且实现前端匹配逻辑
        //此处的路径必须写作 /findMatch
        let websocket=new WebSocket('ws://127.0.0.1:8083/findMatch');
        websocket.onopen = function(){
            console.log("onopen");
        }
        websocket.onclose=function(){
            console.log("onclose");
            alert("当前与服务器的连接已经断开！请重新登录！");
            location.assign("/login.html");
            
        }
        websocket.onerror=function(){
            console.log("onerror");
        }
        //监听页面关闭事件，在页面关闭之前，手动调用这里websocket的close方法
        window.onbeforeunload = function(){
            websocket.close();
        }
        //一会重点实现,要处理服务器返回的响应
        websocket.onmessage=function(e){
            //处理服务器返回的响应数据，这个响应就是针对'开始匹配'/ '结束匹配' 来对应的
            // 解析得到的响应对象，返回的数据是一个JSON字符串，解析成 js对象
            let resp=JSON.parse(e.data);
            let macthButton = document.querySelector('#match-button');
            if(!resp.ok){
                console.log("游戏大厅中接受到非法响应"+resp.reason);
                return;
            }
            if(resp.message == 'startMatch'){
                //开始匹配发送请求成功
                console.log("进入匹配队列成功!");
                matchButton.innerHTML = '匹配中...(点击停止)';
            }else if(resp.message == 'stopMatch'){
                //结束匹配请求发送成功
                console.log("离开匹配队列成功");
                macthButton.innerHTML = '开始匹配';
            }else if(resp.message == 'matchSuccess'){
                //已经匹配到对手，
                console.log("匹配到对手!进入游戏房间");
                location.assign("/game_room.hmtl");
            }else{
                console.log("收到非法响应!message="+resp.message);
            }
        }

        // 给匹配按钮添加一个点击事件，
        let matchButton = document.querySelector('#match-button');
        matchButton.onclick = function(){
            // 在 websocket 请求之前，确认链接是否好
            if(websocket.readyState == websocket.OPEN){
                //如果当前的 readyState 处在 OPEN 状态，说明连接好着
                // 发送的数据有两种可能，开始匹配/停止匹配
                if(matchButton.innerHTML == '开始匹配'){
                    console.log("开始匹配");
                    websocket.send(JSON.stringify(
                        {
                            message:'startMatch',

                        }
                    ));
                }else if(matchButton.innerHTML == '匹配中...(点击停止)'){
                    console.log("停止匹配");
                    websocket.send(JSON.stringify(
                        {
                            message: 'stopMatch',
                        }
                    ));
                }
            }else{
                // 这是说明 连接当前是异常的状态
                alert("当前的连接已经断开!请重新登录！");
                location.assign('/login.html');
            }
        }
    </script>
</body>
</html>